<template #default="scope">
    <el-table :data="tableData" :border="border" v-loading="tableLoading">
        <el-table-column v-for="(item, index) in columns" :width="item.width" :label="item.label" :prop="item.prop">
            <template v-slot="{ row }">
                <slot :name="item.prop" :row="row">
                    {{ getProp(row, item) }}
                </slot>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script  setup>

let getProp = (row, item) => {
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}

// 定义表格属性
let props = defineProps({
    "tableData": {
        type: Array,
    },
    "columns": {
        type: Array,
    },
    "tableLoading": {
        type: Boolean,
        default() {
            return false
        }
    },
    'actionLabel': { //自定义表格内容描述
        type: String,
        default() {
            return "操作"
        }
    },
    "border":{
        type:Boolean,
        default(){
            return true
        }
    }
})

// 表格使用方式
// 给表格传递的属性
// 1.tableData 表格对应的数据
// 2.columns 每一列的属性描述，动态表头...

// columns 传递类型   属性
//          []        label: 表头 prop：数据对应字段 width align

//插槽：
//通过指定 具名插槽 可以自定义表格内容   
</script>


<style lang="less" scoped>
.el-table {
    margin-top: 50px;

    :deep(.el-table__cell) {
        text-align: center;
    }

    :deep(.el-button) {
        width: 94px;
        height: 42px;
    }
}
</style>
    